昨天我們學會了用 CSS 幫網頁上顏色跟調整字型，今天我們要來面對前端排版中最讓人頭痛，但又超級重要的核心觀念——Box Model（盒模型）！

剛開始學前端的時候，常常會遇到一個詭異的狀況：「明明設定寬度是 200px，為什麼加上邊框跟內距之後，整個方塊硬生生變寬了？」

其實，如果把它換成我們最熟悉的設計師視角，一切就很好理解了！

什麼是 Box Model？把網頁元素想像成一個「快遞紙箱」

在 CSS 的世界裡，網頁上的每一個元素（不管是文字、圖片還是按鈕），其實都是一個個矩形的箱子（Box）。這個箱子由內到外，總共包含了四個重要的層次：

1. Content（內容物）：

• 箱子裝的最核心東西（例如文字本身、圖片）。
• 在 Figma 裡就像是文字圖層或圖片本身的實際尺寸。

2. Padding（內距）：

• 內容物跟箱子邊緣之間的內部留白空間。
• 就像你在 Figma 裡面設定一個 Frame 的 Padding（內部間距），讓文字不要貼齊邊框。

3. Border（邊框）：

• 箱子本身的厚度與外框線。
• 就像 Figma 裡的 Stroke（邊框描邊）。

4. Margin（外距）：

• 箱子跟外面其他箱子之間的外部距離。
• 就像 Figma 裡兩個元件（Component）之間互相推開的間距。

為什麼常常尺寸會算錯？（box-sizing: border-box 的救贖）

初學者寫 CSS 最常崩潰的地方在於：
如果你設定一個方塊 width: 300px;，又加了 padding: 20px; 和 border: 5px;，瀏覽器預設計算寬度的方式會把它們全部加起來（300 + 20×2 + 5×2 = 340px），導致版面整個被撐爆！

這對習慣在 Figma 裡精準控制尺寸的設計師來說簡直是場災難。幸好，我們有一個解藥——只要在 CSS 最上方加上這行神奇的設定：

* {
    box-sizing: border-box;
}

它的意思是告訴瀏覽器：「不管我加了多少內距或邊框，這個方塊的總寬度就是我設定的 300px 乖乖聽話！」這拯救了無數設計師的強迫症。

今日小結:

今天我們搞懂了排版的基礎——Box Model 盒模型，知道了 Content、Padding、Border、Margin 的差別，也學會了用 box-sizing: border-box 來控制尺寸。

有了這個基礎的箱子概念後，明天我們就可以進一步用 Flexbox 來把這些箱子排得整整齊齊！我們明天見囉！